<template>
  <div class="afterInvestDel-page">
    <pubChunk :mt="20" v-show="subInvestListShow">
      <span slot="title" class="flex-v-center">
        <span>{{ chartTitle }}</span>
        <el-button-group style="margin-left: 22px;">
          <el-button
            :type="analysisType == 1 ? 'primary' : ''"
            size="small"
            @click="analysisTypeHandle(1)"
          >
            收益分析
          </el-button>
          <el-button
            :type="analysisType == 2 ? 'primary' : ''"
            size="small"
            @click="analysisTypeHandle(2)"
          >
            净值分析
          </el-button>
        </el-button-group>
      </span>
      <div slot="headLeft">
        <div class="flex wrap">
          <chart1Head
            ref="chart1Head"
            dateStyle="top: 520px;"
            :more_chart1_nav_list2="moreChart1NavList2"
            :chartDate.sync="chart_date"
            :chartDate_cb.sync="chartDate_cb"
            :oldDate="oldDate"
            :hasReal="false"
          ></chart1Head>
        </div>
      </div>
      <div class="card">
        <div class="left">
          <subchart
            id="subchart"
            ref="subchart"
            :ids="0"
            :dates="chart_date"
            :chartData="chartData"
            :contrastOptions_obj="contrastOptions_obj_parent"
            :height="400"
          />
        </div>
      </div>
    </pubChunk>
  </div>
</template>
<script>
import pubChunk from '@/components/investComn/pubChunk.vue'
import chart1Head from '@/components/investComn/chart1Head3.vue'

import subchart from './chart.vue'

import {
  getSubInvestNetworthLine,
  queryAllSubInvests,
  queryAllFuturesAccounts,
  getInvestNetworthLine,
} from '@/api/policyManage'
import mixin from './mixins'
export default {
  mixins: [mixin],
  components: {
    pubChunk,
    subchart,
    chart1Head
  },
  data() {
    return {
      chart_date: [],
      oldDate: [],
      chartData: [],
      chartDate_cb: [],
      compositionId: 0,
      chartTitle: '子投资净值分析',
      listLoading: true,
      subInvestList: [],
      subTypeList: [],
      subInvestListShow: true
    }
  },
  props: {
    moreChart1NavList2: {
      type: Object | Array,
    },
    typePage_parent: {
      type: Number | String,
    },
    indexTypes: {
      type: Object | Array,
    },
    contrastOptions_obj_parent: {
      type: Object | Array,
    },
    chart_date_parent: {
      type: Object | Array,
    },
    analysisType: {
      type: Number | String,
    },
  },
  created() {
    this.strategyId = this.$route.params && this.$route.params.id
    if(this.analysisType == 2) {
      this.chart_date = this.chart_date_parent
      this.oldDate = JSON.parse(JSON.stringify(this.chart_date))
      this.getSubInvest()
    }
  },
  mounted() {},
  watch: {
    typePage_parent: {
      handler(newVal, oldDate) {
        if (newVal === 2) {
          this.getSubInvest()
        } else {
          // this.getSubFutures()
          this.chartData = []
          this.subInvestListShow = false
          this.listLoading = false
        }
        if(this.chartData.length) {
          this.$refs.subchart.initChart(this.chartData)
        }
      },
    },
    chart_date_parent: {
      handler(date, oldDate) {
        this.chart_date = date
        this.oldDate = JSON.parse(JSON.stringify(this.chart_date))
        if (this.typePage_parent === 2) {
          this.getSubInvest()
        } else {
          // this.getSubFutures()
          this.chartData = []
          this.subInvestListShow = false
          this.listLoading = false
        }
      },
    },
    chartData: {
      handler(date, oldDate) {
        this.$refs.subchart.initChart(date)
      },
    },
    chart_date() {
      if(this.typePage_parent==2) this.getSubInvest()
    },
  },
  methods: {
    init() {
      // this.chart_date = this.chart_date_parent
    },
    analysisTypeHandle(val) {
      this.$emit('update:analysisType', val)
    },
    groupDeltailHandle(id) {
      this.$router.push({
        path: `/afterManage/subInvest/details/${id}`,
        query: {
          userId: this.userId,
        },
      })
    },
    getSubInvest() {
      Promise.all([
        getSubInvestNetworthLine({
          investId: this.strategyId,
          userId: this.userId,
          startDate: this.chart_date[0],
          endDate: this.chart_date[1],
          indexTypes: this.indexTypes,
        }),
        queryAllSubInvests({ investId: this.strategyId }),
      ])
        .then((values) => {
          this.subInvestListShow = true
          this.listLoading = false
          this.chartData = values[0].body
          this.subInvestList = values[1].body
          const chart_date_cb = [values[0].body[0].date, values[0].body.slice(-1)[0].date]
          this.chartDate_cb = chart_date_cb
          this.chartTitle = '子投资净值分析'
          console.log('投资子投资', values)
        })
        .catch(() => {
          this.chartData = []
          this.listLoading = false
        })
    },
    getSubFutures() {
      Promise.all([
        getInvestNetworthLine({
          strategyId: this.strategyId,
          userId: this.userId,
          startDate: this.chart_date[0],
          endDate: this.chart_date[1],
          indexTypes: this.indexTypes,
        }),
        queryAllFuturesAccounts({ strategyId: this.strategyId }),
      ]).then((values) => {
        this.listLoading = false
        if (values[0].body && values[1].body) {
          this.chartData = values[0].body
          this.subTypeList = values[1].body
          this.chartTitle = '母盘净值'
          this.subInvestListShow = true
          console.log('投资子分类', values)
        } else {
          this.chartData = []
          this.subInvestListShow = false
          this.listLoading = false
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.afterInvestDel-page {
  .title {
    font-size: 26px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #262626;
  }
  // .card {
    // display: flex;
    // justify-content: center;
    // .left {
      // width: 55%;
    // }
    // .right {
      // width: 45%;
    // }
  // }
}
</style>
